import React, { useEffect, useState, useCallback } from 'react';
import { Input } from 'antd';
import styles from './index.less';
const SelectInput = ({ data, onChange = () => {}, selectOpt = {} }) => {
  const [value, setValue] = useState('');
  const [list, setList] = useState([]);
  useEffect(() => {
    setValue(data);
    return () => {
      setValue('');
    };
  }, [data]);

  useEffect(() => {
    setList([
      {
        label: '测试',
        value: 11223,
      },
      {
        label: '测试1',
        value: 112233,
      },
    ]);
    return () => {
      setList([]);
    };
  }, []);

  const inputChange = (value) => {
    setValue(value);
    onChange(value);
  };
  return (
    <div className={styles.container}>
      <Input value={value} onChange={(e) => inputChange(e.target.value)}></Input>
      <div className={styles.list}>
        {list &&
          list.map((item, index) => (
            <div key={index} className={styles.item} onClick={() => inputChange(item.value)}>
              {item.label}
            </div>
          ))}
      </div>
    </div>
  );
};

export default SelectInput;
